<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no"/>
    <title>黑桃招聘</title>
    <link rel="stylesheet" href="css/reset_ca75966.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="css/swiper-3.4.2.min_6af34d0.css"/>
    <link rel="stylesheet" href="css/animate.min_d6dfff2.css"/>
    <link rel="stylesheet" href="css/rem_a30ca1a.css"/>
</head>
<body>
    <!-- S wrap-->
    <div class="wrap">
        <!-- S loading -->
        <div class="loading">
            <div class="inside">
                <div class="load-img"></div>
                <p>loading...</p>
            </div>
        </div>
        <!-- E loading -->
        <!-- S swiper-container-v -->
        <div class="swiper-container swiper-container-v">
            <div class="swiper-wrapper">
                <!-- S swiper-slide1 -->
                <div class="swiper-slide swiper-slide1 stop-swiping">
                    <div class="card-box">
                        <div id="card-offset">
                            <div class="card-n1 layer" data-depth="0.3">
                                <i></i>
                            </div>
                            <div class="card-n2 layer" data-depth="0.2">
                                <i></i>
                            </div>
                            <div class="card-n3 layer" data-depth="-0.3">
                                <i></i>
                            </div>
                        </div>
                        <div class="big-card animated run">
                            <div class="click-reverse"></div>
                            <div class="zoom-out">
                                <div class="front">
                                    <img src="images/card-1-bg.png" alt="">
                                    <div class="figure">
                                        <i class="animated hide"></i>
                                    </div>
                                    <div class="des">
                                        <p class="animated hide">在同事眼中</p>
                                        <p class="animated hide">也许你是一张<strong>“小牌”</strong></p>
                                        <p class="animated hide">(常常被忽略...)</p>
                                    </div>
                                </div>
                                <div class="reverse">
                                    <img src="images/card-back.png" alt="">
                                    <div class="line"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="next-page hide">
                        <i></i>
                    </div>
                </div>
                <!-- E swiper-slide1 -->
                <!-- S swiper-slide2 -->
                <div class="swiper-slide swiper-slide2">
                    <div class="card">
                        <img class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="images/card-2-bg.png" alt="">
                        <div class="figure">
                            <i class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1s"></i>
                        </div>
                        <div class="des">
                            <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.4s">在朋友眼中</p>
                            <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">也许你是一张<strong>“稀有牌”</strong></p>
                            <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.6s">(一直惦记着,遇见你却很难得...)</p>
                        </div>
                    </div>
                    <div class="next-page">
                        <i></i>
                    </div>
                </div>
                <!-- E swiper-slide2 -->
                <!-- S swiper-slide3 -->
                <div class="swiper-slide swiper-slide3">
                    <div class="card">
                        <img class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="images/card-3-bg.png" alt="">
                        <div class="figure">
                            <i class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1s"></i>
                        </div>
                        <div class="des">
                            <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.4s">在父母眼中</p>
                            <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">也许你是一张<strong>“万能牌”</strong></p>
                            <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.6s">(无论在何时何地, 你总是最棒的...)</p>
                        </div>
                    </div>
                    <div class="next-page">
                        <i></i>
                    </div>
                </div>
                <!-- E swiper-slide3 -->
                <!-- S swiper-slide4 -->
                <div class="swiper-slide swiper-slide4">
                    <div class="card">
                        <img class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="images/card-4-bg.png" alt="">
                        <div class="figure">
                            <i class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1s"></i>
                        </div>
                        <div class="des">
                            <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.4s">在妻儿眼中</p>
                            <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">也许你是一张<strong>“王牌”</strong></p>
                            <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.6s">(你永远是我们最坚实的依靠...)</p>
                        </div>
                    </div>
                    <div class="next-page">
                        <i></i>
                    </div>
                </div>
                <!-- E swiper-slide4 -->
                <!-- S swiper-slide5 -->
                <div class="swiper-slide swiper-slide5">
                    <div class="card">
                        <img class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="images/card-5-bg.png" alt="">
                        <!-- <div class="figure">
                            <i></i>
                        </div> -->
                        <div class="des">
                            <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s">但是</p>
                            <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">在我们眼中</p>
                            <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1s"><strong>你不是任何一张牌...</strong></p>
                        </div>
                    </div>
                    <div class="next-page">
                        <i></i>
                    </div>
                </div>
                <!-- E swiper-slide5 -->
                <!-- S swiper-slide6 -->
                <div class="swiper-slide swiper-slide6">
                    <div class="cen">
                        <i class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"></i>
                    </div>
                    <div class="cen-box">
                        <div class="tit">
                            <i class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="2s"></i>
                        </div>
                        <div class="main">
                            <i class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.4s"></i>
                            <i class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.8s"></i>
                            <i class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.6s"></i>
                        </div>
                    </div>
                    <div class="next-page">
                        <i></i>
                    </div>
                </div>
                <!-- E swiper-slide6 -->
                <!-- S swiper-slide7 -->
                <div class="swiper-slide swiper-slide7">
                    <div class="card">
                        <img class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="images/game-1.png" alt="">
                    </div>
                    <div class="next-page">
                        <i></i>
                    </div>
                </div>
                <!-- E swiper-slide7 -->
                <!-- S swiper-slide8 -->
                <div class="swiper-slide swiper-slide8">
                    <div class="card">
                        <img class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="images/game-3.png" alt="">
                    </div>
                    <div class="next-page">
                        <i></i>
                    </div>
                </div>
                <!-- E swiper-slide8 -->
                <!-- S swiper-slide9 -->
                <div class="swiper-slide swiper-slide9">
                    <div class="card">
                        <img class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="images/game-4.png" alt="">
                    </div>
                    <div class="next-page">
                        <i></i>
                    </div>
                </div>
                <!-- E swiper-slide9 -->
                <!-- S swiper-slide10 -->
                <div class="swiper-slide swiper-slide10">
                    <div class="card">
                        <img class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="images/game-2.png" alt="">
                    </div>
                    <div class="next-page">
                        <i></i>
                    </div>
                </div>
                <!-- E swiper-slide10 -->
                <!-- S swiper-slide11 -->
                <div class="swiper-slide swiper-slide11">
                    <div class="card">
                        <img class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="images/game-5.png" alt="">
                    </div>
                    <div class="next-page">
                        <i></i>
                    </div>
                </div>
                <!-- E swiper-slide11 -->
                <!-- S swiper-slide12 -->
                <div class="swiper-slide swiper-slide12">
                    <div class="main">
                        <div class="hd">
                            <i class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s"></i>
                        </div>
                        <div class="bd">
                            <ul class="wrapfix">
                                <li class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s"></li>
                                <li class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s"></li>
                                <li class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1s"></li>
                                <li class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s"></li>
                                <li class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.4s"></li>
                                <li class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.6s"></li>
                            </ul>
                        </div>
                    </div>
                    <div class="next-page">
                        <i></i>
                    </div>
                </div>
                <!-- E swiper-slide12 -->
                <!-- S swiper-slide13 -->
                <div class="swiper-slide swiper-slide13">
                    <div class="main">
                        <div class="hd ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
                            <i></i>
                        </div>
                        <div class="bd ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
                            <div class="swiper-container swiper-container-h">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <img src="images/screen-3-pic1.png" alt="">
                                        <p>5000元/年的父母体检</p>
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="images/screen-3-pic2.png" alt="">
                                        <p>转正就送ipad mini</p>
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="images/screen-3-pic3.jpg" alt="">
                                        <p>“高大上”的办公环境</p>
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="images/screen-3-pic4.png" alt="">
                                        <p>超越行业的薪酬待遇</p>
                                    </div>
                                </div>
                                <!-- 如果需要导航按钮 -->
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                            </div>
                        </div>
                    </div>
                    <div class="next-page">
                        <i></i>
                    </div>
                </div>
                <!-- E swiper-slide13 -->
                <!-- S swiper-slide14 -->
                <div class="swiper-slide swiper-slide14">
                    <div class="main">
                        <div class="hd ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
                            <div class="img1">
                                <img src="images/screen-5-people.png" alt="">
                            </div>
                            <div class="img2">
                                <img src="images/screen-5-title.png" alt="">
                            </div>
                        </div>
                        <div class="bd ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.7s">
                            <label for="">
                                姓　　名　　<input type="text">
                            </label>
                            <label for="">
                                手　　机　　<input type="text">
                            </label>
                            <label for="">
                                求职意向<input type="text">
                            </label>
                            <p>请将简历投送至邮箱：hr@heitao.com</p>
                        </div>
                        <div class="ft ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.9s">
                            <p class="sumbit"></p>
                            <span>成功推荐入职，还有更大惊喜哦！</span>
                        </div>
                    </div>
                </div>
                <!-- E swiper-slide14 -->
            </div>
            <div class="pop stop-swiping">
                <div class="btn-close"></div>
                <div class="pop-box wrapfix">
                    <div class="avatar animated">
                        <img src="" alt="">
                    </div>
                    <div class="info animated">
                        <div class="hd">
                            <p class="p1">市场部</p>
                            <p class="p2">营销策划、微信运营</p>
                        </div>
                        <div class="bd">
                            <p class="p1">招式：<span>一念三千</span></p>
                            <p class="p2">技能点：<span>品牌、投放、PR、二次元、沟通</span></p>
                        </div>
                        <div class="ft">申请此职位，请投简历<br/>至邮箱hr@heitao.com</div>
                    </div>
                </div>
            </div>
            <div id="scene">
                <div class="scene-n1 layer" data-depth="0.2">
                    <i></i>
                </div>
                <div class="scene-n2 layer" data-depth="-0.3">
                    <i></i>
                </div>
                <div class="scene-n3 layer" data-depth="-0.4">
                    <i></i>
                </div>
                <div class="scene-n4 layer" data-depth="-0.1">
                    <i></i>
                </div>
                <div class="scene-n5 layer" data-depth="0.4">
                    <i></i>
                </div>
            </div>
        <!-- <div class="swiper-pagination swiper-pagination-v"></div> -->
        </div>
        <!--S swiper-container-v -->
        <!--S music-btn -->
        <div class="music-btn">
            <i></i>
        </div>
        <audio id="music" controls="false" preload="auto" loop="loop">
            <source src="media/bg.mp3">
        </audio>
        <!--E music-btn -->
    </div>
    <!--E wrap-->
    <script type="text/javascript" src="js/zepto.min_1abd55c.js"></script>
    <script type="text/javascript" src="js/swiper.animate1.0.2.min_813ac0d.js"></script>
    <script type="text/javascript" src="js/jquery.parallax_e30e29a.js"></script>
    <script type="text/javascript" src="js/swiper-3.4.2.min_fb13ef3.js"></script>
    <script type="text/javascript" src="js/index_e824447.js"></script>
</body>
</html>